<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>.box {
        width: 200px;
        height: 30px;
        margin: 50px auto;
    }

    .box .display {
        display: block;
        border: solid 1px black;
        line-height: 30px;
    }

    .box .list {
        margin: 0;
        padding: 0;
        list-style: none;
        border: solid 1px black;
        border-top: none;
        line-height: 30px;
        text-indent: 4px;
        background: #fafafa;
        display: none;
    }

    .box .list li span {
        float: right;
        margin-right: 10px;
    }

    .box .list li.hover {
        background: blue;
        color: #fff;
    }
    </style>
</head>
<body>
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
        <option value="">6</option>
        <option value="">7</option>
    </select>
    <div class="box">
        <span class="display">北京</span>
        <ul class="list">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>杭州</li>
            <li>南京</li>
            <li>成都</li>
        </ul>
    </div>
</body>
<script>
    "use strict";
    var od = document.querySelector(".display");
    var olist = document.querySelector(".list");
    var oli = olist.children;

    var index = 5;
    od.innerText = oli[index].innerText;
    var s = document.createElement("span");
    s.innerHTML = "✅";
    oli[index].appendChild(s);

    od.onclick = function (eve) {
        var e = eve || window.event
        //TODO
        e.stopPropagation();
        olist.style.display = "block"
    };

    document.onclick = function () {
        olist.style.display = "none";
    };

    for (let i = 0; i < oli.length; i++) {
        oli[i].xuhao = i;
        oli[i].onclick = function () {
            od.innerText = this.innerText;
            oli[index].children[0].remove();
            var s = document.createElement("span");
            s.innerHTML = "✅";
            this.appendChild(s)
            index = this.xuhao
        };

        oli[i].onmouseover = function () {
            this.className = "hover"
        };
        oli[i].onmouseout = function () {
            this.className = ""
        };
    }
</script>
</html>